<template>
    <div class="topic-create">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="300px"
        class="demo-ruleForm"
      >
        <el-form-item label="专题标题" prop="title">
          <el-input v-model="ruleForm.title" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="专题子标题" prop="subtitle">
          <el-input v-model="ruleForm.subtitle" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="专题图片" prop="picUrl">
          <el-upload
            class="avatar-uploader"
            action="/api/admin/storage/create"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="专题内容" prop="content">
          <quill-editor
            class="ql-editor"
            v-model="ruleForm.content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
        </el-form-item>
        <el-form-item label="商品低价" prop="price">
          <el-input v-model="ruleForm.price" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="阅读量" prop="readCount">
          <el-input v-model="ruleForm.readCount" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="专题内容" prop="goods">
          <el-button size="mini" type="primary">创建商品</el-button>
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="q" label="商品ID"> </el-table-column>
            <el-table-column prop="w" label="图片">
              <template slot-scope="scope">
                <img
                  style="width: 40px; height: 40px"
                  :src="scope.row.e"
                  alt=""
                />
              </template>
            </el-table-column>
            <el-table-column prop="r" label="商品名称"></el-table-column>
            <el-table-column prop="t" label="商品介绍"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleDelte(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <div class="form-btn">
          <el-button size="mini" @click="handleBack">取消</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handleTrue(1)"
            v-if="this.id"
            >确定</el-button
          >
          <el-button size="mini" type="primary" @click="handleTrue(2)" v-else
            >确定</el-button
          >
        </div>
      </el-form>
    </div>
  </template>
  
  <script>
  import { Topiccreate, Topicread, Topicupdate } from "@/api/tggl/ztgl";
  export default {
    data() {
      return {
        ruleForm: {},
        editorOption: {
          placeholder: "请在这里输入",
          modules: {
            toolbar: [
              ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
              // ['blockquote', 'code-block'], // 引用，代码块
              [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
              [{ list: "ordered" }, { list: "bullet" }], // 列表
              [{ script: "sub" }, { script: "super" }], // 上下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文本方向
              [{ size: ["small", "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
              [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
              [{ font: [] }], // 字体
              [{ align: [] }], // 对齐方式
              ["clean"], // 清除字体样式
              ["link"], //, 'image', 'video'
            ],
          },
        },
        imageUrl: "",
        id: "",
      };
    },
    methods: {
      handleBack() {
        this.$router.back();
      },
      // 初始化
      handleFun() {
        const params = {
          id: this.id,
        };
        Topicread(params).then((res) => {
          (this.ruleForm = res.data.topic),
            (this.imageUrl = res.data.topic.picUrl);
        });
      },
      // 确定
      handleTrue(val) {
        if (val === 1) {
          const params = {
            ...this.ruleForm,
            picUrl: this.imageUrl,
          };
          Topicupdate(params).then((res) => {
            this.$router.back();
          });
        } else {
          const params = {
            ...this.ruleForm,
            picUrl: this.imageUrl,
          };
          Topiccreate(params).then((res) => {
            this.$router.back();
          });
        }
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.imageUrl = res.data.url;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      // 失去焦点事件
      onEditorBlur(quill) {
        console.log("editor blur!", quill);
      },
      // 获得焦点事件
      onEditorFocus(quill) {
        console.log("editor focus!", quill);
      },
      // 准备富文本编辑器
      onEditorReady(quill) {
        console.log("editor ready!", quill);
      },
      // 内容改变事件
      onEditorChange({ quill, html, text }) {
        console.log("editor change!", quill, html, text);
        this.$emit("contentData", html);
      },
    },
    created() {
      this.id = this.$route.query.id;
    },
    mounted() {
      this.handleFun();
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .topic-create::v-deep {
    .el-form {
      .el-form-item {
        width: 1000px;
      }
      .quill-editor {
        .ql-container {
          height: 200px;
        }
      }
      .form-btn {
        margin-left: 20px;
        margin-bottom: 20px;
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  </style>